<template>
    <div class="big">
        <div class="con">
            <h4>{{newsinfo.title}}</h4>
            <span class="na">{{newsinfo.airname}}</span>
            <div class="wzzy">{{newsinfo.content}}</div>
           

        <div class="commentBox1">
        <h3>评论</h3>
        <p v-if="comments.length==0">暂无评论，我来发表第一篇评论！</p>
        <div v-else>
            <div class="comments" v-for="(item,index) in comments" :key="item._id" v-bind:index="index" >
                <b>{{item.name}}</b>
                <p @click="changCommmer(item.name,index,item._id)">{{item.content}}</p>
                <div v-if="item.list.length > 0">
                    <div class="list" v-for="(item2,i) in item.list" :key="item2._id">
                        <b>{{item2.responder}}  回复  {{item2.reviewers}}</b>
                        <p @click="changCom(item2.responder,index,item._id,i)">{{item2.content}}</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="commentBox">
        <h3>发表评论</h3>
        <b v-if="type">你回复 {{oldComment}}</b>
        <textarea name="" value="请填写评论内容" v-model="commentText"></textarea>
        <button class="btn1" @click="addComment">发表</button>
        <button class="btn2" @click="canelComment">取消</button>
    </div>





        </div>
    </div>
</template>
<script>
export default {
    data(){
        return{
            page:1,
            
            id:this.$route.params.id,
            newsinfo:{},
            message:"",


            commenter: "session",   //评论人，这里会从session拿
            type: 0,               //0为评论作者1为评论别人的评论
            oldComment: null,       //旧评论者的名字
            chosedIndex: -1,   
            comments:[],             //评论内容
            commentText:'',
            listi:-1,
            pid:0
        }
    },
    created(){
        this.getNewsInfo(),
        this.gettalk();
    },
    methods:{
        getNewsInfo(){
            this.$http.get("/wzcont/"+this.id).then(result=>{
                this.newsinfo=result.body.msg[0]
                console.log(result.body)
            })
        },
        gettalk(){
            this.$http.get("/cmt").then(result=>{
                console.log(result.body)
                this.comments = result.body.msg
            })
        },
       
        getMore(){
            this.page++;
            this.gettalk();
        },
        addComment: function() {
            if(this.type == 0) {
                this.comments.push({
                    name: this.$store.getters.getusername,
                    
                    content: this.commentText,
                    list: []
                });
                this.$http.post('/cmt',{
                
                name:this.$store.getters.getusername,
                content:this.commentText.trim(),
                pid:this.pid
            }).then(function(result){
                
                this.commentText=''
               
            })
                //服务器端
            }else if(this.type == 1){
                this.comments[this.chosedIndex].list.push({
                    responder: this.$store.getters.getusername,
                    reviewers:this.comments[this.chosedIndex].name,
                    
                    content: this.commentText
                });
                this.$http.post('/cmtt',{
                
                responder:this.$store.getters.getusername,
                reviewers:this.comments[this.chosedIndex].name,
                content:this.commentText.trim(),
                pid:this.pid
            }).then(function(result){
                
                this.commentText=''
               
            })
                this.type = 0;
                this.pid = 0;
            }
            else if(this.type == 2){
                this.comments[this.chosedIndex].list.push({
                    responder: this.$store.getters.getusername,
                    reviewers:this.comments[this.chosedIndex].list[this.listi].responder,
                    
                    content: this.commentText
                });
                this.$http.post('/cmtt',{
                
                responder:this.$store.getters.getusername,
                reviewers:this.comments[this.chosedIndex].list[this.listi].responder,
                content:this.commentText.trim(),
                pid:this.pid
            }).then(function(result){
                
                this.commentText=''
               
            })
                this.type = 0;
                this.pid = 0;
            }
        },
        //监听到了点击了别人的评论
        changCommmer: function(name,index,id) {
            this.oldComment = name;
            this.chosedIndex = index;
            this.type = 1;
            this.pid = id;
        },
        changCom:function(name,index,id,i) {
            this.oldComment = name;
            this.chosedIndex = index;
            this.type = 2;
            this.pid = id;
            this.listi = i;
        },
        //监听到了取消评论
        canelComment: function() {
            this.type = 0;
        }

    }
}
</script>
<style lang="scss">
    .big{
        
        // background: url(../../images/hui.jpg);
        
        .commentBox1{
            position: relative;
            left: 30px;
             h3{
            margin-top: 50px;
        }
        }
        .commentBox{
            position: relative;
            left: 150px;
            h3{
                margin-top: 50px;
            }
        }
        .btn1{
            background-color:rgb(0, 0, 200);
            color: antiquewhite;
            height: 35px;
            width: 70px;
            margin-right: 50px;
        }
        .btn2{
            background-color:rgb(254, 1, 46);
            color: antiquewhite;
            height: 35px;
            width: 70px;
            margin-right: 50px;
        }
    }
    .con{
        
        width: 1200px;
        padding-left: 300px;
       
        .na{
            display: block;
            margin-left: 900px;
            margin-top: 30px;
            width: 50px;
            height: 50px;
        }
        .wzzy{
            height: 500px;
            border: 1px solid #000;
            margin-top: 50px;
            width: 900px;
            margin-left: 150px;
        }
        h4{
            margin-left: 300px;
            margin-top: 50px;
        }
        .comments{
            position: relative;
            left: 150px;
            .list{
                position: relative;
                left: 50px;
            }
            p{
                color: rgb(104, 64, 2)
            }
        }
       
        
        
        
    }
</style>
